<template>
  <div class="register">
    <div class="bimg">
      <img src="../assets/yuansu2.webp" alt="" style="width: 800px" />
    </div>
    <div class="register_box">
      <div class="formItem">
        <!-- <p style="float:right">已有账号？去<router-link to="/login">登录</router-link></p> -->
        <p
          class="iconfont icon-zhuce"
          style="
            font-size: 100px;
            color: #5770fe;
            text-align: center;
            margin-bottom: 20px;
          "
        ></p>

        <!-- 表单组件 -->
        <el-form
          ref="registerForm"
          :rules="rules"
          :model="registerForm"
          class="login_form"
          label-position="right"
          label-width="80px"
          style="marginleft: 40px"
        >
          <!-- 账号 -->

          <el-form-item prop="nickName" label="姓名">
            <el-input v-model="registerForm.nickName"></el-input>
          </el-form-item>
          <!-- 密码 -->

          <el-form-item prop="sex" label="性别">
            <el-radio
              v-model="registerForm.sex"
              label="1"
              style="margin: 0 10px 0 30px"
              ><i
                class="icon-nan iconfont"
                style="font-size: 24px; color: #0881d9"
              ></i
            ></el-radio>
            <el-radio v-model="registerForm.sex" label="2"
              ><i
                class="icon-nv iconfont"
                style="font-size: 24px; color: #e5185e"
              ></i
            ></el-radio>
          </el-form-item>

          <el-form-item prop="post" label="职位">
            <el-input v-model="registerForm.post"></el-input>
          </el-form-item>

          <el-form-item prop="age" label="年龄">
            <el-input v-model.number="registerForm.age"></el-input>
          </el-form-item>

          <el-form-item prop="userPhone" label="电话号码">
            <el-input v-model="registerForm.userPhone"></el-input>
          </el-form-item>
          <el-form-item prop="pass" label="密码">
            <el-input
              type="password"
              v-model="registerForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPass" label="确认密码">
            <el-input
              type="password"
              v-model="registerForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="register">注册</el-button>
            <el-button type="info" @click="resetRegisterForm('registerForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <div class="toLogin">
          <p>已有账号？去<router-link to="/login">登录</router-link></p>
          <!-- <p>回到<router-link to='/home'>首页</router-link></p> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        nickName: "",
        sex: "",
        post: "",
        age: "",
        userPhone: "",
        password: "",
        checkPass: "",
      },
      registerRulue: [],

      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
      },
    };
  },
  methods: {
    //重置按钮
    resetRegisterForm(formName) {
      this.$refs[formName].resetFields();
    },
    async register() {
      this.$refs.registerForm.validate(async (valid) => {
        if (!valid) return;
        delete this.registerForm.checkPass;
        const { data: res } = await this.$http.post(
          "register",
          this.registerForm
        );
        if (res != "success") {
          return this.$message.error("注册失败！");
        }
        this.$message.success("恭喜你，注册成功！");
        this.$router.push("/login");
      });
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // }
  },
  created() {},
};
</script>

<style lang="less" scoped>
.register {
  display: flex;
  .bimg {
    flex: 800px;
    background-image: linear-gradient(#d1dcf6, #436de1);
  }
  .register_box {
    // background: linear-gradient(to right, #e9f2f9, #b7bce4);
    flex: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .formItem {
      width: 500px;
      // height: 100%;
      // margin: 50px auto 0px auto;
      margin-top: 20px;
      padding: 20px;
      box-shadow: 8px 8px 16px 4px #dfe1e5;
    }
  }
}
.el-input {
  border: 0;
  outline: none;
  width: 5rem;
  // padding-left: 0;
  font-size: 0.175rem;
  color: #0e3567;
  margin-left: 20px;
}
.el-radio {
  margin-left: 24px;
}
.el-input::-webkit-input-placeholder {
  color: #dfe0e2;
  font-weight: 400;
}
.el-form {
  span {
    font-size: 0.225rem;
    color: #8da0b8;
  }
}
.toLogin {
  // margin: 0.625rem 0;
  margin-left: 80px;
  color: #8da0bf;
  a {
    color: #0e3567;
  }
}
.btns {
  // margin: 50px 0 20px 80px;
  margin-left: 40px;
}
.el-button {
  background: #4164df;
  width: 1.5rem;
  height: 0.5rem;
  border: 0;
  border-radius: 0.25rem;
  color: white;
  font-weight: 600;
  letter-spacing: 0.0125rem;
  font-size: 0.2rem;
}
</style>